<template>
  <div>
    <el-form label-width="120px">
      <el-form-item label="公司logo">
        <single-upload
          :singleUploadTitle="singleUploadTitle"
          v-model="shopgetinfo.logo"
          style="display: inline-block; margin-left: 10px; width: 100px"
        ></single-upload>
      </el-form-item>
      <el-form-item label="店铺名称">
        <!-- <el-input
          v-model.trim="user.name"
          style="width: 300px; margin-left: 10px"
        /> -->
        <span style="margin-left: 10px; font-size: 20px">{{
          shopgetinfo.name
        }}</span>

      </el-form-item>
      <el-form-item label="订餐电话">
        <el-input
          v-model.trim="shopgetinfo.telephone"
          style="width: 300px; margin-left: 10px"
        />
      </el-form-item>
      <el-form-item label="门店地址">
        <!-- <el-input v-model.trim="user.domain" style="width: 300px; margin-left: 10px;" /> -->
        <span style="margin-left: 10px">{{ shopgetinfo.address }}</span>
        <el-button
          type="primary"
          round
          @click="mapShowFn"
          style="margin-left: 20px"
          ><i class="el-icon-map-location" /> 点击选择定位</el-button
        >
      </el-form-item>
      <el-form-item label="经营类目">
        <!-- <el-input v-model.trim="user.domain" style="width: 300px; margin-left: 10px;" /> -->
        <span style="margin-left: 10px">{{
          shopgetinfo.shopCategoryName ? shopgetinfo.shopCategoryName : "无"
        }}</span>
      </el-form-item>
      <!-- <el-form-item label="公告"> -->
      <!-- <el-input type="textarea" :rows="4" v-model.trim="user.notice" /> -->
      <!-- <el-input
        style="width: 300px; margin-left: 10px;"
        type="textarea"
        :rows="5"
        placeholder="请输入内容"
        v-model="notice">
      </el-input>
    </el-form-item> -->
      <el-form-item label="店铺装修">
        <!-- <el-button type="primary" @click="changesback">使用模板</el-button> -->
        <!-- <single-upload
          :singleUploadTitle="singleUploadTitle"
          v-model="shopgetinfo.background"
          style="display: inline-block; margin-left: 10px"
        ></single-upload> -->
        <img
          :src="shopgetinfo.background"
          style="width: 150px; hight: 80px"
          @click="changesback"
           v-if="shopgetinfo.background!=null"
        />
        <el-button
          v-if="shopgetinfo.background==null"
          type="primary"
          @click="changesback"
          >点击上传</el-button
        >

      </el-form-item>

      <el-form-item>
        <el-button
          :loading="loading"
          type="primary"
          @click.native.prevent="submit"
          v-permission="['parameter.edit']"
          >修改</el-button
        >
      </el-form-item>
    </el-form>

    <el-dialog
      title="请选择具体位置"
      :visible.sync="mapShow"
      top="5vh"
      width="800px"
      :before-close="handleClose"
    >
      <Map :initcenter="[shopgetinfo.lng, shopgetinfo.lat]" @getMap="getMap" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="mapShow = false">取 消</el-button>
        <el-button type="primary" @click="savelngLat">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="店铺装修" :visible.sync="imagesShow">
      <el-button type="primary" @click="useimage">使用模板</el-button>
      <el-button type="primary" @click="voluntarily">自行上传</el-button>
      <div
        v-if="imgaesdialog == true"
        class="demo-image"
        style="
          margin-top: 20px;
          display: flex;
          justify-content: space-around;
          flex-wrap: wrap;
        "
      >
        <el-image
          v-for="(item, index) in images"
          style="width: 100px; height: 100px"
          :src="item"
          @click="selectimage(index)"
        ></el-image>
      </div>
      <single-upload
        v-if="imgaesdialog == false"
        :singleUploadTitle="singleUploadTitle"
        v-model="shopgetinfo.background"
        style="display: block; margin-left: 10px; margin-top: 30px"
      ></single-upload>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="determine">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { update } from "@/api/sysSetUp";
import { updateMchShop } from "@/api/shop";
import singleUpload from "@/components/Upload/singleUpload";
import permission from "@/directive/permission/index.js"; // 权限判断指令
import Map from "@/components/GaodeMap/index";
export default {
  components: { singleUpload, Map },
  directives: { permission },
  props: {
    user: {
      type: Object,
      default: () => {
        return {
          name: "",
          notice: "",
          logo: "",
        };
      },
    },
    shopgetinfo: {
      type: Object,
        default: () => {
        return {
          name: "",
          notice: "",
          logo: "",
        };
      },
    },
  },
  data() {
    return {
      imagesShow: false,
      mapShow: false,
      loading: false, // 按钮防双击
      notice: "",
      singleUploadTitle: "200*200",
      lng: "",
      lat: "",
      address: "",
      formattedAddress: "",
      images: [
        "http://cdn.rzico.com/dinner/wode/picture/001.jpg",
        "http://cdn.rzico.com/dinner/wode/picture/002.jpg",
        "http://cdn.rzico.com/dinner/wode/picture/003.jpg",
        "http://cdn.rzico.com/dinner/wode/picture/004.jpg",
        "http://cdn.rzico.com/dinner/wode/picture/005.jpg",
        "http://cdn.rzico.com/dinner/wode/picture/006.jpg",
        "http://cdn.rzico.com/dinner/wode/picture/007.jpg",
        "http://cdn.rzico.com/dinner/wode/picture/008.jpg",
        "http://cdn.rzico.com/dinner/wode/picture/009.jpg",
        "http://cdn.rzico.com/dinner/wode/picture/010.jpg",
        "http://cdn.rzico.com/dinner/wode/picture/011.jpg",
        "http://cdn.rzico.com/dinner/wode/picture/012.jpg",
        "http://cdn.rzico.com/dinner/wode/picture/013.jpg",
        "http://cdn.rzico.com/dinner/wode/picture/014.jpg",
      ],
      imgaesdialog: true,
      codeImg:''
    };
  },

  created(){
  },
  methods: {
    determine() {
      this.imagesShow = false;
    },
    useimage() {
      this.imgaesdialog = true;
    },
    voluntarily() {
      this.imgaesdialog = false;
    },
    selectimage(index) {
      this.shopgetinfo.background = this.images[index];
      this.imagesShow = false;
    },
    changesback() {
      this.imagesShow = !this.imagesShow;
    },
    getMap(lng, lat, address) {
      console.log(lng, lat);
      console.log(address);
      this.lng = lng;
      this.lat = lat;
      this.address = address.formattedAddress;
    },
    savelngLat() {
      this.shopgetinfo.lng = this.lng;
      this.shopgetinfo.lat = this.lat;
      this.shopgetinfo.address = this.address;
      updateMchShop(this.shopgetinfo)
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(res);
        });
      this.mapShow = false;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    mapShowFn() {
      this.mapShow = !this.mapShow;
    },
    submit() {
      this.loading = true;
      // this.user.notice = this.notice;
      // update(this.user)
      //   .then((res) => {
      //     console.log(res);
      //     this.loading = false;
      //     this.$message.success("修改成功");
      //   })
      //   .catch((err) => {
      //     console.log(res);
      //   });
      updateMchShop(this.shopgetinfo)
        .then((res) => {
          console.log(res);
          this.loading = false;
           this.$message.success("修改成功");
        })
        .catch((err) => {
          console.log(res);
        });
    },

  },
};
</script>
<style  scoped>
/deep/.el-upload__tip {
  display: none;

}
</style>
